<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>login page</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <style type="text/css">
        .c1{position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            min-width: 1000px;
            z-index:-10;
            background-repeat:no-repeat;
            background-size:cover;
            background-position: center 0;
        }
        .c2{padding:10px;
            width:350px;height:auto;
            background-color: #254665;
            opacity: 0.7;
            position:absolute;
            left: 37%;
            top: 35%;
            text-align:center;
            border-radius:10px;
            filter:opacity(0.9);
        }
        /*.login-button { !* 按钮美化 *!*/
        /*    width: 150px; !* 宽度 *!*/
        /*    height: 30px; !* 高度 *!*/
        /*    border-width: 0px; !* 边框宽度 *!*/
        /*    border-radius: 10px; !* 边框半径 *!*/
        /*    background: #1E90FF; !* 背景颜色 *!*/
        /*    cursor: pointer; !* 鼠标移入按钮范围时出现手势 *!*/
        /*    outline: none; !* 不显示轮廓线 *!*/
        /*    font-family: Microsoft YaHei; !* 设置字体 *!*/
        /*    color: white; !* 字体颜色 *!*/
        /*    font-size: 14px; !* 字体大小 *!*/
        /*    margin-bottom:10px;*/
        /*}*/
        /*.login-button:hover{background-color:#5599ff;*/
        /*}*/

        #button {
            border: 0;
            margin-top: 10px;
            width: 85px;
            height: 30px;
            font-size: 15px;
            font-weight: 700;
            color: white;
            background-color:#9196f2;
            /*background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);*/
            border-radius: 15px;
        }
        #register {
            border: 0;
            margin-top: 10px;
            width: 85px;
            height: 30px;
            font-size: 15px;
            font-weight: 700;
            color: white;
            background-color: #9196f2;
            /*background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);*/
            border-radius: 15px;
        }
        .text{
            margin:5px;outline: none;
            width:200px;height:32px;
            border-radius:10px;
        }
    </style>
    <script>
        function toRegister(){
            window.location.href="${pageContext.request.contextPath}/registerJSP";
        }
        // 关闭警告框函数
        function fun(){
            $("#a").html('');
        }
        //账号密码验证成功后跳转到主页面函数
        function Fun(){
            window.location.href="${pageContext.request.contextPath}/index";
        }
        function login(){
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/check",
                type:"post",
                data:JSON.stringify({username:username,password:password}),
                contentType:"application/json;charset=UTF-8",
                dataType:"text",
                success:function(data){
                    if (data=="1"){
                        let html1 = '<div class="alert alert-success" role="alert" >'+
                            '<p align="center">'+"登陆成功"+'</p>'+'</div>';
                        // form表单中添加一个id为a的空span标签，用来动态展示文字
                        $("#a").html(html1);
                        setTimeout(Fun,600);
                    }else if (data=="0"){
                        let html2 = '<div class="alert alert-danger" role="alert" onclick="fun()">'+
                            '<p>'+"登陆失败，账号或密码错误"+'</p>'+'</div>';
                        $("#a").html(html2);
                    }
                }
            })
        }

    </script>
</head>
<body>
<div>
    <img src="../../images/login.jpg" class="c1"/></div>
<div class="c2">
    <form method="post">
        <span id="a"></span>
        <div><h2 style="color:white;">LOGIN</h2></div>
        <div><input type="text" id="username" name="username" size="20" placeholder="用户名" class="text"/><br/></div>
        <div><input type="password" id="password" name="password" size="20" placeholder="密码" class="text"/><br/></div>
        <button id="register" type="button" onclick="toRegister()">register</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="button" type="button" onclick="login()" data-dismiss="alert">Login</button>


    </form>
</div>
</body>
</html>